<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from preview.freewebtemplatesdownload.com/syntra/tables-datatable.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 07 Mar 2018 10:30:55 GMT -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mannat Themes">
    <meta name="keyword" content="">

    <title>冲向亚马逊 | 商品列表</title>

    <!-- Theme icon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Responsive and DataTables -->
    <link href="assets/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />


    <!-- Theme Css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/slidebars.min.css" rel="stylesheet">
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/menu.css" rel="stylesheet" type="text/css">
    <link href="assets/css/style.css" rel="stylesheet">

    <style >
        .form-control{
            width:200px;
            float:left;
            margin-right: 20px;
            margin-top: 20px;
        }
        .clear{
            clear: both;
        }
        .query{
            text-align: right;
            float: right;
            margin: 20px 0px;
        }
        .btn-xs{
            color:blue;
        }
        #datatable_paginate{
            padding-right: 20px;
        }
    </style>
</head>

<body class="sticky-header">
<section>
    <!-- sidebar left start-->
    <div class="sidebar-left">
        <div class="sidebar-left-info">


            <!--sidebar nav start-->
            <ul class="side-navigation">
                <li>
                    <h3 class="navigation-title"></h3>
                </li>
                <li class="menu-list "><a href="#"><i class="fa fa-university"></i> <span>店面管理</span></a>
                    <ul class="child-list">
                        <li class="active"><a href="shop.html"> 店铺列表</a></li>

                        <li ><a href="#"> </a></li>
                    </ul>
                </li>
                <li class="menu-list nav-active active"><a href="#"><i class="mdi mdi-google-circles-extended"></i> <span>商品管理 <span
                        class="badge badge-primary noti-arrow pull-right">6</span> </span></a>
                    <ul class="child-list">
                        <li class="active"><a href="#"> 商品管理</a></li>
                        <li><a href="tables-datatable.html"> 商品规格</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href="#"><i class="mdi mdi-diamond"></i> <span>订单管理</span></a>
                    <ul class="child-list">
                        <li><a href="tables-datatable.html"> 订单列表</a></li>
                        <li><a href="tables-datatable.html"> 未完成订单</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href="javascript:;"><i class="mdi mdi-table"></i> <span>用户反馈</span></a>
                    <ul class="child-list">
                        <li><a href="tables-datatable.html"> 反馈列表</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href="#"><i class="mdi mdi-google-earth"></i> <span>市场调查</span></a>
                    <ul class="child-list">
                        <li><a href="tables-datatable.html">市场调查列表</a></li>
                        <li><a href="tables-datatable.html">市场调查明细</a></li>

                    </ul>
                </li>
                <li class="menu-list"><a href="#"><i class="mdi mdi-chart-arc"></i> <span>用户管理 </span></a>
                    <ul class="child-list">
                        <li><a href="pages-changepwd.html">修改密码</a></li>
                        <li><a href="pages-login.html">注销</a></li>
                    </ul>
                </li>

            </ul><!--sidebar nav end-->
        </div>
    </div><!-- sidebar left end-->

    <!-- body content start-->
    <div class="body-content">
        <!-- header section start-->
        <div class="header-section">
            <!--logo and logo icon start-->
            <div class="logo">
                <a href="#">
                            <span class="logo-img">
                                <img src="assets/images/logo_sm.png" alt="" height="26">
                            </span>
                    <!--<i class="fa fa-maxcdn"></i>-->
                    <span class="brand-name">体验大师</span>
                </a>
            </div>

            <!--toggle button start-->
            <a class="toggle-btn"><i class="ti ti-menu"></i></a>
            <!--toggle button end-->



            <div class="notification-wrap">
                <!--right notification start-->
                <div class="right-notification">
                    <ul class="notification-menu">
                        <li>
                            <a href="javascript:;" class="notification" data-toggle="dropdown">
                                <i class="mdi mdi-bell-outline"></i>
                                <span class="badge badge-success">2</span>
                            </a>
                            <ul class="dropdown-menu mailbox dropdown-menu-right">
                                <li>
                                    <div class="drop-title">提醒</div>
                                </li>
                                <li class="notification-scroll">
                                    <div class="message-center">
                                        <a href="#">
                                            <div class="user-img">
                                                <i class="ti ti-bell"></i>
                                            </div>
                                            <div class="mail-contnet">
                                                <h6>HTC国贸旗舰店</h6>
                                                <span class="mail-desc"> 刚刚  收到一个预约订单</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="user-img">
                                                <i class="ti ti-bell"></i>
                                            </div>
                                            <div class="mail-contnet">
                                                <h6>HTC国贸旗舰店</h6>
                                                <span class="mail-desc">一小时之前  收到一个预约订单 </span>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <a class="text-center bg-light" href="javascript:void(0);">
                                        <strong>查看所有提醒</strong>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" data-toggle="dropdown">
                                <i class="mdi mdi-account-circle"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right profile-menu">
                                <a class="dropdown-item" href="#"><i class="mdi mdi-settings m-r-5 text-muted"></i> 设置</a>
                                <a class="dropdown-item" href="#"><i class="mdi mdi-logout m-r-5 text-muted"></i> 安全退出</a>
                            </div>
                        </li>
                    </ul>
                </div><!--right notification end-->
            </div>
        </div>
        <!-- header section end-->

        <div class="container-fluid">
            <div class="page-head">
                <form class="tyds-filter">

                    <input class="form-control" name="sku" type="equals" value="" placeholder="商品编号"  />
                    <input class="form-control" name="title" type="like" values="" placeholder="商品名称" />
<!--
                    <div class="clear"></div><-->

                    <button type="button" class="btn btn-primary query">查询</button>
                </form>
            </div>
            <div class="clear"></div>
            <div class="data-table">
                <div class="row">
                    <div class="col-lg-12 col-sm-12">
                        <div class="card m-b-30">
                            <div class="card-body table-responsive">
                                <h5 class="header-title">商品列表</h5>
                                <p class="text-muted"></p>
                                <div class="table-odd">
                                    <table id="datatable" class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th style="width:80px;">编号</th>
                                            <th style="width:250px;">名称</th>
                                            <th style="width:150px;">产品编号sku</th>
                                            <th style="width:160px;">产品描述</th>
                                            <th style="width:120px;">包裹数量</th>
                                            <th style="width:60px;">msrp</th>
                                            <th style="width:200px;">包裹尺寸</th>
                                            <th style="width:60px;">操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--end row-->
            </div>

        </div><!--end container-->

        <!--footer section start-->
        <footer class="footer">
            2018 &copy; amazon.
        </footer>
        <!--footer section end-->
    </div>
    <!--end body content-->
</section>

<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-migrate.js"></script>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/jquery.slimscroll.min.js"></script>
<script src="assets/js/slidebars.min.js"></script>

<!-- Responsive and datatable js -->
<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<script src="assets/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="assets/plugins/datatables/responsive.bootstrap4.min.js"></script>

<!--app js-->
<script src="assets/js/jquery.app.js?v=1.1.3"></script>
<script type="text/javascript">
    $(document).ready(function() {


        $.extend( $.fn.dataTable.defaults, {
            searching: false,
            ordering:  false,
            paging: true,
            info: false,
            lengthChange: false,
            full_numbers:'第一页,前一页,后一页,最后页,数字',
            pagingType: "full_numbers",
            language: {
                "processing": "数据正在处理中",
                // 当前页显示多少条
                "lengthMenu": "当前页显示多少条",
                // _START_（当前页的第一条的序号） ,_END_（当前页的最后一条的序号）,_TOTAL_（筛选后的总件数）,
                // _MAX_(总件数),_PAGE_(当前页号),_PAGES_（总页数）
                "info": "Showing page _PAGE_ of _PAGES_",
                // 没有数据的显示（可选），如果没指定，会用zeroRecords的内容
                "emptyTable": "没有数据的显示",
                // 筛选后，没有数据的表示信息，注意emptyTable优先级更高
                "zeroRecords": "筛选信息为空",
                // 千分位的符号，只对显示有效，默认就是","  一般不要改写
                //"thousands": "'",
                // 小数点位的符号，对输入解析有影响，默认就是"." 一般不要改写
                //"decimal": "-",
                // 翻页按钮文字控制
                "paginate": {
                    "first": "第一页",
                    "last": "最后一页",
                    "next": "下一页",
                    "previous": "前一页"
                },
                // Client-Side用，Server-Side不用这个属性
                "loadingRecords": "请稍后 - 加载中..."
            },
        } );
        var form = $(this);
        var tb= $('#datatable').DataTable({

            "serverSide": true,
            'ajax': {
                'url':   appUrl+"/product/productlist",
                'method':'POST'
            },"processing": true,
            "serverSide": true,
            "columns": [
                { "data": "id" },
                { "data": "title" },
                { "data": "sku" },
                { "data": "description" },
                { "data": "itemPackageQuantity" },
                { "data": "msrp" },
                { "data": "packageDimensions" }
            ],
            "columnDefs" : [


                {
// 定义操作列,######以下是重点########
                    "targets" : 3,//操作按钮目标列
                    "data" : null,
                    "render" : function(data, type,row) {

                        var html="";
                        html += "<img src=' ' />"
                        return html;
                    }
                },

                {
// 定义操作列,######以下是重点########
                    "targets" : 7,//操作按钮目标列
                    "data" : null,
                    "render" : function(data, type,row) {
                        var id = '"' + row.id + '"';
                        var html = "<a onclick='view("+id+")' class='delete btn btn-default btn-xs'><i class='fa fa-eye'></i> 查看</a>"
                        html += "<a onclick='edit("+id+")' class='up btn btn-default btn-xs'><i class='fa fa-pencil'></i> 编辑</a>"
                        html += "<a onclick='del("+id+")' class='down btn btn-default btn-xs'><i class='fa fa-trash-o'></i> 删除</a>"
                        return html;
                    }
                }
            ]

        });

        var keys = $("#tyds-filter").serializeArray();

        if(window.localStorage.menuType=="close"){
            $(".toggle-btn").trigger("click");
        }

        $(".btn-primary").click(function(){

            tb.search("","","").draw();

        });



    } );

    function view(id){

        alert(id);
    }
    function edit(id){
        window.open("goodsedit.html?id="+id);
    }
    function del(id){

        alert(id);
    }
</script>

</body>

<!-- Mirrored from preview.freewebtemplatesdownload.com/syntra/tables-datatable.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 07 Mar 2018 10:32:12 GMT -->
</html>